<template>
  <div class="about">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <el-icon><InfoFilled /></el-icon>
              <span style="margin-left: 8px">项目介绍</span>
            </div>
          </template>

          <el-descriptions :column="2" border>
            <el-descriptions-item label="项目名称"
              >Vue3 + TypeScript + Element Plus 前端项目</el-descriptions-item
            >
            <el-descriptions-item label="技术栈"
              >Vue3, TypeScript, Element Plus, Vite</el-descriptions-item
            >
            <el-descriptions-item label="请求库">Axios (Class 封装)</el-descriptions-item>
            <el-descriptions-item label="Mock 支持">vite-plugin-mock</el-descriptions-item>
            <el-descriptions-item label="状态管理">Pinia</el-descriptions-item>
            <el-descriptions-item label="路由管理">Vue Router</el-descriptions-item>
            <el-descriptions-item label="代码规范">ESLint + Prettier</el-descriptions-item>
            <el-descriptions-item label="测试框架">Vitest</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <el-icon><Star /></el-icon>
              <span style="margin-left: 8px">功能特性</span>
            </div>
          </template>

          <ul class="feature-list">
            <li>
              <el-icon><Check /></el-icon> Vue3 Composition API
            </li>
            <li>
              <el-icon><Check /></el-icon> TypeScript 支持
            </li>
            <li>
              <el-icon><Check /></el-icon> Element Plus UI 组件库
            </li>
            <li>
              <el-icon><Check /></el-icon> 组件化开发
            </li>
            <li>
              <el-icon><Check /></el-icon> Axios 请求封装
            </li>
            <li>
              <el-icon><Check /></el-icon> 请求拦截器
            </li>
            <li>
              <el-icon><Check /></el-icon> Token 自动携带
            </li>
            <li>
              <el-icon><Check /></el-icon> Mock 数据支持
            </li>
            <li>
              <el-icon><Check /></el-icon> 环境变量配置
            </li>
            <li>
              <el-icon><Check /></el-icon> 路径别名配置
            </li>
          </ul>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <el-icon><Tools /></el-icon>
              <span style="margin-left: 8px">开发工具</span>
            </div>
          </template>

          <el-space direction="vertical" size="large" style="width: 100%">
            <div>
              <h4>推荐编辑器</h4>
              <p>Visual Studio Code + Volar 插件</p>
            </div>

            <div>
              <h4>浏览器插件</h4>
              <p>Vue.js devtools</p>
            </div>

            <div>
              <h4>代码格式化</h4>
              <p>Prettier + ESLint</p>
            </div>

            <div>
              <h4>Git 提交规范</h4>
              <p>Conventional Commits</p>
            </div>
          </el-space>
        </el-card>
      </el-col>
    </el-row>

    <el-row style="margin-top: 20px">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <el-icon><Link /></el-icon>
              <span style="margin-left: 8px">相关链接</span>
            </div>
          </template>

          <el-space wrap>
            <el-button type="primary" @click="openLink('https://vuejs.org')">
              <el-icon><Link /></el-icon>
              Vue.js
            </el-button>
            <el-button type="success" @click="openLink('https://www.typescriptlang.org')">
              <el-icon><Link /></el-icon>
              TypeScript
            </el-button>
            <el-button type="warning" @click="openLink('https://element-plus.org')">
              <el-icon><Link /></el-icon>
              Element Plus
            </el-button>
            <el-button type="info" @click="openLink('https://vitejs.dev')">
              <el-icon><Link /></el-icon>
              Vite
            </el-button>
            <el-button type="danger" @click="openLink('https://axios-http.com')">
              <el-icon><Link /></el-icon>
              Axios
            </el-button>
          </el-space>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";

const openLink = (url: string) => {
  window.open(url, "_blank");
  ElMessage.success("正在打开链接...");
};
</script>

<style scoped>
.about {
  padding: 20px;
}

.card-header {
  display: flex;
  align-items: center;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  display: flex;
  align-items: center;
  padding: 8px 0;
  color: #606266;
}

.feature-list li .el-icon {
  color: #67c23a;
  margin-right: 8px;
}

h4 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 14px;
  font-weight: 600;
}

p {
  margin: 0;
  color: #909399;
  font-size: 13px;
}
</style>
